<template>
  <el-dialog v-model="dialogVisible" title="提示" width="30%">
    <el-form
      ref="ruleFormRef"
      v-loading="loading"
      :rules="rules"
      :model="querys"
      label-width="120px"
    >
   
      <el-form-item label="延期理由:" prop="approverReason">
        <el-input
          v-model="querys.approverReason"
          type="textarea"
          style="width: 400px"
          placeholder="请输入延期理由"
        />
      </el-form-item>
      <div v-if="approvalStatus!='未延期'">
        <el-form-item label="当前状态:">
        <el-input v-model="approvalStatus" disabled style="width: 200px" />
      </el-form-item>
      <el-form-item label="同意或拒绝理由:">
        <el-input
          v-model="approvalReason"
          disabled
          type="textarea"
          style="width: 200px"
          placeholder="输入同意或拒绝理由"
        />
      </el-form-item>
    </div>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="IsDelay(ruleFormRef)">确认</el-button>
        <el-button type="primary" @click="dialogVisible = false"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref, defineEmits, reactive, watch } from 'vue';
  // import { ElMessageBox } from 'element-plus';
  import { tbDelay, tbgetDelayReason } from '/@/api/tb/tbaddNext';
  import { ElMessage } from 'element-plus';
  const dialogVisible = ref(false);
  const querys = reactive({
    orderId: '',
    orderManager: '',
    orderStatus: '',
    approverReason: '',
  });
  const loading = ref(true);
  const ruleFormRef = ref<any>();
  const approvalReason = ref('');
  const approvalStatus = ref('');
  const emit = defineEmits(['updateForm']);
  const Open = async (query) => {
    for (let key in query) {
      querys[key] = '';
      querys[key] = query[key];
    }
    dialogVisible.value = true;
  };
  watch(
    () => querys.orderId, //这样才可以检测到对象里面的值
    async () => {
      const res = await tbgetDelayReason(querys);
      if (res.result) {
        loading.value = false;
        approvalReason.value = res.data.approverReason;
        approvalStatus.value = res.data.approvalStatus;
      }
      querys.approverReason = '';
    },
    { immediate: true, deep: true },
  );
  const IsDelay = async (formEl) => {
    if (!formEl) return;
    await formEl.validate(async (valid) => {
      if (valid) {
        const res = await tbDelay({ ...querys });
        if (res.result) {
          dialogVisible.value = false;
          querys.approverReason = '';
          emit('updateForm');
          ElMessage({
            message: res.message,
            type: 'success',
          });
        } else {
          ElMessage.error(res.message);
        }
      }
    });
  };
  const rules = reactive({
    approverReason: [{ required: true, message: '请输入延期理由', trigger: 'blur' }],
  });
  defineExpose({
    Open,
  });
</script>
<style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>
